<html lang="zh-CN" class="js cssanimations"><head>
    <title>风禾在线客服系统</title>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta http-equiv="Content-Language" content="zh-CN">
    <link rel="shortcut icon" href="/wolive.ico">
    
    <link rel="stylesheet" type="text/css" href="/assets/libs/layer/skin/layer.css">
    <link rel="stylesheet" type="text/css" href="/assets/libs/amaze/css/amazeui.min.css">

    
    <script src="https://hm.baidu.com/hm.js?bc8045638f0448307931dcc2b949fdd1"></script>
    <script src="/assets/libs/audio/BenzAMRRecorder.js">
    </script><script src="/assets/libs/webrtc/recorder.js">
    </script><script type="text/javascript" src="/assets/libs/jquery/jquery.min.js"></script>
    <script type="text/javascript" src="/assets/libs/jquery/jquery.form.min.js"></script>
    <script type="text/javascript" src="/assets/libs/jquery/jquery.cookie.js"></script>
    <script type="text/javascript" src="/assets/libs/layer/layer.js"></script><link rel="stylesheet" href="https://home.wolive.cc/assets/libs/layer/skin/layer.css" id="layui_layer_skinlayercss" style="">
    <script type="text/javascript" src="/assets/libs/amaze/js/amazeui.min.js"></script>
    <script type="text/javascript" src="/assets/libs/layui/layui.js"></script>

    <link rel="stylesheet" type="text/css" href="/assets/libs/layui/css/layui.css">

    <link rel="stylesheet" type="text/css" href="/assets/libs/bootstrap/bootstrap.min.css">
    
    <link rel="stylesheet" type="text/css" href="/assets/css/admin/common.css">
    <link rel="stylesheet" type="text/css" href="/assets/css/admin/reload.css">
    <script type="text/javascript" src="/assets/js/admin/functions.js"></script>
    <link rel="stylesheet" type="text/css" href="/assets/css/admin/index.css?v=1.5">
    <link rel="stylesheet" type="text/css" href="/assets/css/admin/index_me.css?v=1.6">
    <script type="text/javascript" src="/assets/js/admin/common_me.js"></script>
    <script type="text/javascript" src="/assets/libs/push/pusher.min.js"></script>
    <script src="/assets/libs/adapter.js"></script>


    <script type="application/javascript">
        var mediaStreamTrack;
        var WEB_SOCKET_SWF_LOCATION = "/assets/libs/web_socket/WebSocketMain.swf";
        var WEB_SOCKET_DEBUG = true;
        var WEB_SOCKET_SUPPRESS_CROSS_DOMAIN_SWF_ERROR = true;

        var chat_data =Array();
        var record;
        var myTitle = document.title;
        var config ={
          'app_key':'zfis9p7wZiZm5ebni3edft5',
          'whost':'wss.wolive.cc',
          'value':true,
          'wport':443        }

        var titleBlink = function(add){
            if (!titleBlink.title) {
                titleBlink.record = 1;
                titleBlink.title = document.title;
                $(document).on('click', function () {
                    titleBlink(false);
                });
            }
            if (typeof add !== 'undefined' && !add) {
                if (titleBlink.timer) {
                    window.clearInterval(titleBlink.timer);
                    delete titleBlink.timer;
                }
                document.title = titleBlink.title;
                return;
            }

            if (!titleBlink.timer && (typeof document.hidden == 'undefined' || document.hidden)) {
                titleBlink.timer = window.setInterval(function(){
                    document.title = (++titleBlink.record%2 == 1) ? '【消息】'+titleBlink.title : '【 】'+titleBlink.title;
                }, 800);
            }
        };


    
        layui.use('element', function () {
           var element = layui.element;
        });

        var wolive_connect =function () {
            pusher = new Pusher('zfis9p7wZiZm5ebni3edft5', {
                encrypted: true                , enabledTransports: ['ws']
                , wsHost: 'wss.wolive.cc'
                , wssPort: 443                , authEndpoint: '/admin/login/auth'
                ,disableStats: true
         });

            var web = "test";
            var dataarr = new Array();
            var value ="2";

            // 私人频道
            var channelme = pusher.subscribe("ud" + value);
            channelme.bind("on_notice", function (data) {
                if(data.message.type == 'change'){
                    layer.msg(data.message.msg);
                }
                getchat();
                getwait();
            });

            channelme.bind("on_chat", function (data) {
               $.cookie("cu_com",'');
               layer.msg('该访客被删除');
               getchat();
            });

          
            // 公共平道
          
            var channelall = pusher.subscribe("all" + web);
            channelall.bind("on_notice", function (data) {

                if(0 == 0 || 0 == data.message.groupid){
                    layer.msg(data.message.msg, {offset: "20px"});
                }

                if(0 != data.message.groupid){
                 
                     layer.msg('该用户向其他分组咨询！', {offset: "20px"});
                }

                  getwait();
                  getchat();
                
            });
            
            var channel =pusher.subscribe("kefu" + value);
            // 接受视频请求
            channel.bind("video",function (data) {
                getchat();
                var msg = data.message;
                var cha = data.channel;
                var cid = data.cid;
                var avatar =data.avatar;
                var username =data.username;
                layer.open({
                    type: 1,
                    title: '申请框',
                    area: ['260px', '160px'],
                    shade: 0.01,
                    fixed: true,
                    btn: ['接受', '拒绝'],
                    content: "<div style='position: absolute;left:20px;top:15px;'><img src='"+avatar+"' width='40px' height='40px' style='border-radius:40px;position:absolute;left:5px;top:5px;'><span style='width:100px;position:absolute;left:70px;top:5px;font-size:13px;overflow-x: hidden;'>"+username+"</span><div style='width:90px;height:20px;position:absolute;left:70px;top:26px;'>"+msg+"</div></div>",
                    yes: function () {
                        layer.closeAll('page');
                        var str='';
                        str+='<div class="videos">';
                        str+='<video id="localVideo" autoplay></video>';
                        str+='<video id="remoteVideo" autoplay class="hidden"></video></div>';


                        layer.open({
                          type:1
                          ,title: '视频'
                          ,shade:0
                          ,closeBtn:1
                          ,area: ['440px', '378px']
                          ,content:str
                          ,end:function(){

                           
                             mediaStreamTrack.getTracks().forEach(function (track) {
                                track.stop();
                            });
            
                          }
                      });
                        try{
                          connenctVide(cid);
                         }catch(e){
                             console.log(e);
                             return;
                         }
                        
                    },
                    btn2:function(){
                        var sid = $('#channel').text();
                        $.ajax({
                            url:'/admin/set/refuse',
                            type:'post',
                            data:{channel:cha}
                        });

                        layer.closeAll('page');
                    }
                });
            });

            channel.bind('getswitch',function(data){
                layer.alert(data.message);
                getchat();
            });

            // 接受拒绝视频请求
            channel.bind("video-refuse",function (data) {
                layer.alert(data.message);
                layer.closeAll('page');
            });

            // 接受消息

            channel.bind("cu-event", function (data) {

                if("open" == 'open'){
                    audioElementHovertree = document.createElement('audio');
                    audioElementHovertree.setAttribute('src', "/upload/voice/test1553950631482456558.mp3");
                    audioElementHovertree.setAttribute('autoplay', 'autoplay');
                }


                var debug, portrait,showtime;
                var cdata = $.cookie("cu_com");

                if (cdata) {
                    var json = $.parseJSON(cdata);
                    debug = json.visiter_id;
                    portrait = json.avatar;
                } else {
                    debug = "";

                }

                if($.cookie("time") == ""){
                    time =data.message.timestamp;
                    $.cookie("time",time);
                    var mydate =new Date(time*1000);
                    showtime =mydate.getHours()+":"+mydate.getMinutes();
                }else{
                    time =$.cookie("time");
                    if((data.message.timestamp - time) >60){
                        var mydate =new Date(data.message.timestamp*1000);
                        showtime =mydate.getHours()+":"+mydate.getMinutes();
                    }else{
                        showtime ="";
                    }
                    $.cookie("time",data.message.timestamp);
                }
                var msg = '';
                msg += '<li class="chatmsg"><div class="showtime">' +showtime+ '</div><div style="position: absolute;left:3px;">';
                msg += '<img class="my-circle  se_pic" src="' + portrait + '" width="50px" height="50px"></div>';
                msg += "<div class='outer-left'><div class='customer'>";
                msg += "<pre>" + data.message.content + "</pre>";
                msg += "</div></div>";
                msg += "</li>";

                if (data.message.visiter_id == debug) {
                    $(".conversation").append(msg);
                    getwatch(data.message.visiter_id);

                    var str = data.message.content;
                    str.replace(/<img [^>]*src=['"]([^'"]+)[^>]*>/gi, function (match, capture) {

                    var pos = capture.lastIndexOf("/");
                    var value = capture.substring(pos + 1);

                    if (value.indexOf("emo") == 0) {
                        str = data.message.content;
                    } else {
                        str = '[图片]';
                    }
                });

                str = str.replace(/<div><a[^<>]+><i>.+?<\/i>.+?<\/a><\/div>/,'[文件]');
                str = str.replace(/<a[^<>]+>.+?<\/a>/,'[超链接]');
                str =str.replace(/<img src=['"]([^'"]+)[^>]*>/gi,'[图片]');

                $("#msg" + data.message.channel).html(str);
             
                var div = document.getElementById("wrap");

                } 
                getnow(data.message);
                if(div){
                    div.scrollTop = div.scrollHeight;
                }
                $("#notices-icon").removeClass('hide');
                titleBlink();
            });


            // 通知 游客离线
            channel.bind("logout", function (data) {

                //表示访客离线
                var cdata = $.cookie("cu_com");
                var chas;
                if (cdata) {
                    var jsondata = $.parseJSON(cdata);
                    chas = jsondata.channel;
                }

                if (chas == data.message.chas) {
                    //头像变灰
                    $("#v_state").text("离线");
                }

                $("#img" + data.message.chas).addClass("icon_gray");
                getchat();

            });

            channel.bind("geton", function (data) {

                //表示访客在线
                var cdata = $.cookie("cu_com");
                var chas;
                if (cdata) {
                    var jsondata = $.parseJSON(cdata);
                    chas = jsondata.channel;
                }
                if (chas == data.message.chas) {
                    //头像变亮
                    $("#img" + data.message.chas).removeClass("icon_gray");
                    $("#v_state").text("在线");
                }

                $("#img" + data.message.chas).removeClass("icon_gray");
                getchat();

            });

            pusher.connection.bind('state_change', function(states) {
              
                if(states.current == 'unavailable' || states.current == "disconnected" || states.current == "failed" ){

                        pusher.unsubscribe("kefu" + value);
                        pusher.unsubscribe("all" + web);
                        pusher.unsubscribe("ud" + value);
            
                    if (typeof pusher.isdisconnect == 'undefined') {
                     pusher.isdisconnect = true;

                     pusher.disconnect();
                     delete pusher;
                     
                      window.setTimeout(function(){
                         wolive_connect();
                      },1000);
                    }

                 
                    $(".profile").text('离线');
                }
            });

            pusher.connection.bind('connected', function() {
                $(".profile").text('在线');
            });
        }


        function showpage(obj){

            var value =$(obj).attr("name");
            var key =$(obj).attr("id");
            layer.tips(value, '#'+key,{tips: [4, '#2F4050']});
        }



    </script>

    <script type="text/javascript" src="/assets/libs/web_socket/swfobject.js"></script>
    <script type="text/javascript" src="/assets/libs/web_socket/web_socket.js"></script>
    <script type="text/javascript" src="/assets/js/admin/online.js?v=1.5"></script>
    
<style type="text/css">

    #group-menus-main li{
        display: block;
        width: 100%;
        height: 45px;
        line-height: 20px;
    }

    a:hover {
        text-decoration: none;
        color: #858684;
    }

    a {
        color: #858684;
    }

    .info{
        position: absolute;
        left:40%;
    }

    #notices-icon{
        display: inline-block;
        width: 15px;
        height: 15px;
        background: url("/assets/images/admin/notice.png") no-repeat;
        background-size:100%;
        position: absolute;
        left:30px;
        top: 8px;
        z-index: 9990;
    }


   #group-menus-main i{
    font-size: 20px;
   }


</style></head>

<body data-ext-version="1.4.5" style="">



<div id="layout-west">
    <div id="layout-menus">
        <div id="layout-menus-info">
            <a class="" href="javascript:;">
                <img src="/assets/images/index/workerman_logo.png" alt="..." class="am-circle" width="35px" height="35px">
                <!-- <span style="color: #fff;font-weight: bold;font-size: 16px;margin-left: 10px;">Wolive客服</span> -->
                <span class="info hide" style="color: #fff;font-weight: bold;font-size: 16px;margin-top:10px;">WoLive</span>
            </a>

        </div>

        <div id="layout-menus-lists">

            <ul id="group-menus-main" class="group-menus am-list ">
                                <li class="menu-item" id="title1" onmouseover="showpage(this)" name="首页">
                    <a href="/admin/index/index.html">
                        <i class="layui-icon"></i><span class="info hide">首页</span>
                    </a>
                </li>

                                <li class="menu-item" id="title2" onmouseover="showpage(this)" name="对话平台" style="background:#13292B;">
                    <a href="/admin/index/chats.html">
                        <i class="layui-icon"></i><span class="info hide">对话平台</span>
                    </a>
                </li>
                
                <!--
                
                <li class="menu-item" id="title4" onmouseover="showpage(this)" name="留言查看">
                    <a href="/admin/index/message.html" >
                       <i class="am-icon-envelope am-icon-sm" style="font-size: 12px;margin-left: 1px;"></i><span class="info hide">留言查看</span>
                    </a>
                </li>
                                -->

                                    <li class="menu-item" id="title7" onmouseover="showpage(this)" name="历史记录">
                        <a href="/admin/manager/view.html">
                            <i class="layui-icon"></i><span class="info hide">历史记录</span>
                        </a>
                    </li>
                                <li class="menu-item" id="title9" onmouseover="showpage(this)" name="网页部署">
                    <a href="/admin/index/front.html">
                        <i class="layui-icon"></i><span class="info hide">网页部署</span>
                    </a>
                </li>
                                <li class="menu-item" id="title10" onmouseover="showpage(this)" name="设置">
                  <a href="/admin/index/set.html">
                    <i class="layui-icon"></i><span class="info hide">设置</span>
                  </a>
                 </li>
                
            </ul>
        </div>
    </div>

    <div class="west_foot1" style="width:100%;height:40px;position: absolute;bottom: 0px;background: #13292B;text-align: center;line-height: 40px;">
        <a href="javascript:changeall()">
            <i class="menus-icon am-icon-align-justify am-icon-sm"></i>
        </a>
    </div>
    <div class="west_foot2 hide" style="width:100%;height:40px;position: absolute;bottom: 0px;background: #13292B;text-align: center;line-height: 40px;">
        <a href="javascript:changesmall()">
            <i class="menus-icon am-icon-align-justify am-icon-sm"></i>
        </a>
    </div>
</div>

<script type="text/javascript">
    var width =document.body.clientWidth;

    var changeall =function(){
        $("#layout-west").css("width","130px");
        $("#layout-center").css({"position":"absolute","left":"130px","width":(width-130)+"px"});
        $(".info").removeClass("hide");
        $(".west_foot2").removeClass("hide");
        $(".west_foot1").addClass("hide");
    }
    var changesmall =function(){
        $("#layout-west").css("width","55px");
        $("#layout-center").css({"position":"absolute","left":"55px","width":(width-55)+"px"});
        $(".info").addClass("hide");
        $(".west_foot2").addClass("hide");
        $(".west_foot1").removeClass("hide");
    }

    window.onresize = function(){
        $("#layout-west").css("width","55px");
        $("#layout-center").css("width",(width-55)+"px");
    }

</script>

<div id="layout-center">
    <div id="layout-north">
                <a id="layout-logo"><i class="am-icon-bookmark"></i>&nbsp;对话平台</a>&nbsp;        <ul id="layout-tools" class="am-nav am-nav-pills">
            <li style="width: 100%;height: 25px">
                <div class="am-dropdown " data-am-dropdown="">
                    <a class="am-dropdown-toggle" href="javascript:;" data-am-dropdown-toggle="">
                        <img id="se_avatar" src="/upload/images/15529973091213128303.png" alt="..." class="am-circle" width="40px" height="40px">
                        <span class="handle" id="se"> 我是测试客服 </span>
                        <span id="channel" style="display: none;"> </span>
                        <span id="customer" style="display: none;"></span>
                                                <span class="profile">在线</span>
                                            </a>

                    <ul class="am-dropdown-content">
                        <li><a href='javascript:showinfo({"service_id":2,"user_name":"test","nick_name":"\u6211\u662f\u6d4b\u8bd5\u5ba2\u670d","password":"da7df67d6b23fc59bf16607f0d2c0809","groupid":"0","phone":"188888888881","email":"465257165","business_id":"test","avatar":"\/upload\/images\/15529973091213128303.png","level":"manager","parent_id":0,"state":"online"},[])'><i class="am-icon-user"></i> 个人资料</a></li>
                        <li><a href="javascript:modify(2)"><i class="am-icon-key"></i>修改密码</a></li>
                                                <li class="am-divider"></li>
                        <li>
                            <a href="/admin/login/logout.html" class="safe-exit">
                                <i class="am-icon-power-off"></i> 安全退出
                            </a>
                        </li>
                    </ul>
                </div>
            </li>
        </ul>
    </div>


<style>
      .layui-form-label{
        float: left;
        display: block;
        padding: 9px 15px;
        width: 100px;
        font-weight: 400;
        line-height: 20px;
        text-align: right;
    }

       .videos {
            font-size: 0;
            height: 100%;
            pointer-events: none;
            position: absolute;
            transition: all 1s;
            width: 100%;
        }

        #localVideo {
            height: 100%;
            max-height: 100%;
            max-width: 100%;
            /*object-fit: cover;*/
            transition: opacity 1s;
            width: 100%;
        }

        #remoteVideo {
            display: block;
            height: 100%;
            max-height: 100%;
            max-width: 100%;
            /*object-fit: cover;*/
            position: absolute;
            transition: opacity 1s;
            width: 100%;
        }
</style>

<div id="container">
    <div class="all_content" style="overflow-y: hidden;">
        <section class="" style="width:20%;height:100%;position:absolute;left:0px;background: #f3f3f4;border-right: 1px solid #ddd;">
            <div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief" style="margin:0px;position: absolute;top:0px;width: 100%;">
                <ul class="layui-tab-title">
                    <li class="layui-this" style="width: 50%;">当前对话</li>
                    <li style="width: 50%;">排队列表 <div id="waitnum" class="notice-icon hide" style="position: absolute;top:0px;line-height: 18px;font-size: 8px;"></div></li>
                </ul>
                <div class="layui-tab-content" style="padding: 0px;">
                    <div class="layui-tab-item  layui-show" id="chat_list" style="width: 100%; overflow-y: auto; height: 241px;"><div id="v6f5a583369305458624a41617a35684458346f6f66525066376352492f74657374" class="visiter" onmouseover="showcut(this)" onmouseout="hidecut(this)"><i class="layui-icon myicon hide" title="删除" style="font_weight:blod" onclick="cut('oZX3i0TXbJAaz5hDX4oofRPf7cRI')">ဆ</i><span id="c6f5a583369305458624a41617a35684458346f6f66525066376352492f74657374" class="notice-icon hide"></span><div class="visit_content" onclick="choose(15916)"><img class="am-radius v-avatar" id="img6f5a583369305458624a41617a35684458346f6f66525066376352492f74657374" src="https://thirdwx.qlogo.cn/mmopen/0gNQia8U5Xg7qdVpcgbNvwJfkJBF7QXuZ3ib7c8MqfnBw0Pn9N34JIyIJKBRFuFw6ic7Xkc4c27eDlOpv7tF6ZIOMTjzqXVQ8Yy/132" width="50px"><span class="c_name">wolive＆来聊 咨询</span><div id="msg6f5a583369305458624a41617a35684458346f6f66525066376352492f74657374" class="newmsg">[文件]</div></div></div><div id="v584b5161654d73792f74657374" class="visiter" onmouseover="showcut(this)" onmouseout="hidecut(this)"><i class="layui-icon myicon hide" title="删除" style="font_weight:blod" onclick="cut('XKQaeMsy')">ဆ</i><span id="c584b5161654d73792f74657374" class="notice-icon hide"></span><div class="visit_content" onclick="choose(16586)"><img class="am-radius v-avatar" id="img584b5161654d73792f74657374" src="/assets/images/index/avatar-red2.png" width="50px"><span class="c_name">游客XKQaeMsy</span><div id="msg584b5161654d73792f74657374" class="newmsg">打啊</div></div></div><div id="v584b51616e514f2f74657374" class="visiter" onmouseover="showcut(this)" onmouseout="hidecut(this)"><i class="layui-icon myicon hide" title="删除" style="font_weight:blod" onclick="cut('XKQanQO')">ဆ</i><span id="c584b51616e514f2f74657374" class="notice-icon hide"></span><div class="visit_content" onclick="choose(16587)"><img class="am-radius v-avatar" id="img584b51616e514f2f74657374" src="/assets/images/index/avatar-red2.png" width="50px"><span class="c_name">游客XKQanQO</span><div id="msg584b51616e514f2f74657374" class="newmsg"></div></div></div><div id="v584b5161754c6c712f74657374" class="visiter" onmouseover="showcut(this)" onmouseout="hidecut(this)"><i class="layui-icon myicon hide" title="删除" style="font_weight:blod" onclick="cut('XKQauLlq')">ဆ</i><span id="c584b5161754c6c712f74657374" class="notice-icon hide"></span><div class="visit_content" onclick="choose(16588)"><img class="am-radius v-avatar" id="img584b5161754c6c712f74657374" src="/assets/images/index/avatar-red2.png" width="50px"><span class="c_name">游客XKQauLlq</span><div id="msg584b5161754c6c712f74657374" class="newmsg">没有</div></div></div><div id="v313535343235373836312f74657374" class="visiter" onmouseover="showcut(this)" onmouseout="hidecut(this)"><i class="layui-icon myicon hide" title="删除" style="font_weight:blod" onclick="cut('1554257861')">ဆ</i><span id="c313535343235373836312f74657374" class="notice-icon hide"></span><div class="visit_content" onclick="choose(16585)"><img class="am-radius v-avatar icon_gray" id="img313535343235373836312f74657374" src="https://www.wolive.cc/assets/upload/5.jpg" width="50px"><span class="c_name">小凯</span><div id="msg313535343235373836312f74657374" class="newmsg">[图片]</div></div></div><div id="v313535343235343739322f74657374" class="visiter" onmouseover="showcut(this)" onmouseout="hidecut(this)"><i class="layui-icon myicon hide" title="删除" style="font_weight:blod" onclick="cut('1554254792')">ဆ</i><span id="c313535343235343739322f74657374" class="notice-icon hide"></span><div class="visit_content" onclick="choose(16582)"><img class="am-radius v-avatar icon_gray" id="img313535343235343739322f74657374" src="https://www.wolive.cc/assets/upload/8.jpg" width="50px"><span class="c_name">彤彤</span><div id="msg313535343235343739322f74657374" class="newmsg">[图片]<a href="http://www.wolive.cc/demo/index/product3" target="_blank" class="wolive_product_msg"><div class="product_info"><p class="wolive_product_title">尼康（Nikon） </p><p class="wolive_product_info">尼康（Nikon） D610 机身 入门全画幅 单反相机 ?约2,426万有效像素 39点自动对焦 轻巧机身</p><p class="wolive_product_price">5999.00￥</p></div></a></div></div></div><div id="v313535343235343134322f74657374" class="visiter" onmouseover="showcut(this)" onmouseout="hidecut(this)"><i class="layui-icon myicon hide" title="删除" style="font_weight:blod" onclick="cut('1554254142')">ဆ</i><span id="c313535343235343134322f74657374" class="notice-icon hide"></span><div class="visit_content" onclick="choose(16580)"><img class="am-radius v-avatar icon_gray" id="img313535343235343134322f74657374" src="https://www.wolive.cc/assets/upload/14.jpg" width="50px"><span class="c_name">飞飞侠</span><div id="msg313535343235343134322f74657374" class="newmsg">[图片]<a href="http://www.wolive.cc/demo/index/product1" target="_blank" class="wolive_product_msg"><div class="product_info"><p class="wolive_product_title"> Apple MacBook Air </p><p class="wolive_product_info">13.3英寸笔记本电脑 银色(2017款Core i5 处理器/8GB内存/128GB闪存 MQD32CH/A)</p><p class="wolive_product_price">7588.00￥</p></div></a></div></div></div><div id="v313535343235343236352f74657374" class="visiter" onmouseover="showcut(this)" onmouseout="hidecut(this)"><i class="layui-icon myicon hide" title="删除" style="font_weight:blod" onclick="cut('1554254265')">ဆ</i><span id="c313535343235343236352f74657374" class="notice-icon hide"></span><div class="visit_content" onclick="choose(16579)"><img class="am-radius v-avatar icon_gray" id="img313535343235343236352f74657374" src="https://www.wolive.cc/assets/upload/9.jpg" width="50px"><span class="c_name">达康</span><div id="msg313535343235343236352f74657374" class="newmsg"><img src="/upload/emoji/emo_24.gif"> </div></div></div><div id="v313535343136383736382f74657374" class="visiter" onmouseover="showcut(this)" onmouseout="hidecut(this)"><i class="layui-icon myicon hide" title="删除" style="font_weight:blod" onclick="cut('1554168768')">ဆ</i><span id="c313535343136383736382f74657374" class="notice-icon hide"></span><div class="visit_content" onclick="choose(16577)"><img class="am-radius v-avatar icon_gray" id="img313535343136383736382f74657374" src="https://www.wolive.cc/assets/upload/0.jpg" width="50px"><span class="c_name">查理</span><div id="msg313535343136383736382f74657374" class="newmsg">[图片]<a href="https://www.wolive.cc/demo/index/product2" target="_blank" class="wolive_product_msg"><div class="product_info"><p class="wolive_product_title">iPhone X</p><p class="wolive_product_info">Apple 苹果 iPhone X 全面屏4G手机 深空灰色 64GB</p><p class="wolive_product_price">7638.00￥</p></div></a></div></div></div></div>
                    <div class="layui-tab-item" id="wait_list" style="width: 100%; overflow-y: auto; height: 241px;"></div>
                </div>
            </div>
        </section>


        <section style="width:50%;height:100%;position: absolute;left: 20%;background: #FFF;border-right: 1px solid #ddd;">
            <div class="no_chats">
                <i class="no_chats-pic"></i>
            </div>
            <div class="chatbox hide" style="width: 100%;height: 100%">

                <div id="wrap" style="width: 100%;height:62%;overflow-y: auto;">
                    <ul class="conversation"></ul>
                </div>
                <script type="text/javascript">

                    window.onresize = function(){
                        var height =document.body.clientHeight;
                        $("#chat_list").css("height",(height -110)+"px");
                        $("#wait_list").css("height",(height-110)+"px");
                    }

                    document.getElementById("wrap").onscroll = function(){
                        var t =  document.getElementById("wrap").scrollTop;
                        if( t == 0 ) {
                            var sdata = $.cookie("cu_com");
                            var jsondata = $.parseJSON(sdata);
                            var chas = jsondata.visiter_id;
                            if($.cookie("hid") != ""){
                                getdata(chas);
                            }
                        }
                    }


                    function info(){
                        layer.tips("将您剪切好的图片粘贴到输入框即可", "#paste", {tips: [1, '#9EC6EA']});
                    }

                </script>
                <div class="footer">
                    <div class="msg-toolbar" style="background: #fff;border: none;">
                        <a id="face_icon" onclick="faceon()"><i class="am-icon-md am-icon-smile-o"></i></a>
                        <a>
                            <form id="picture" enctype="multipart/form-data">
                                <div class="am-form-group am-form-file">
                                    <i class="am-icon-md am-icon-photo"></i>
                                    <input type="file" name="upload" onchange="put()">
                                </div>
                            </form>
                        </a>
                        <a>
                            <form id="file" enctype="multipart/form-data">
                                <div class="am-form-group am-form-file">
                                    <i class="am-icon-md am-icon-folder-o"></i>
                                    <input type="file" name="folder" onchange="putfile()">
                                </div>
                            </form>
                        </a>
                                                <a onclick="getvideo()"><i class="am-icon-md am-icon-video-camera"></i></a>
                                                <a onclick="getaudio()"><i class="layui-icon" style="font-size: 22px;cursor: pointer;"></i></a>
                                                <a href="javascript:getblack()"><i class="am-icon-ban am-icon-md" title="拖入黑名单"></i></a>
                        <a onclick="getswitch()"><i class="am-icon-md am-icon-random"></i></a>
                        <a onclick="gethistory()"><i class="am-icon-md am-icon-wpforms" title="该用户所有聊天记录"></i></a>
                        <a onmouseover="info()" id="paste" style="position:absolute; right:2px;top:5px;"><i class="am-icon-sm am-icon-cut"></i> 怎样发截图？</a>
                    </div>

                    <div class="tool_box">

                        <div class="wl_faces_content">

                            <div class="wl_faces_main">
                                <ul>
                                    <li><a href="javascript:;">
                                        <img title="羊驼" src="/upload/emoji/emo_01.gif"></a></li>
                                    <li><a href="javascript:;">
                                        <img title="神马" src="/upload/emoji/emo_02.gif"></a></li>
                                    <li><a href="javascript:;">
                                        <img title="浮云" src="/upload/emoji/emo_03.gif"></a></li>
                                    <li><a href="javascript:;">
                                        <img title="给力" src="/upload/emoji/emo_04.gif"></a></li>
                                    <li><a href="javascript:;">
                                        <img title="围观" src="/upload/emoji/emo_05.gif"></a></li>
                                    <li><a href="javascript:;">
                                        <img title="威武" src="/upload/emoji/emo_06.gif"></a></li>
                                    <li><a href="javascript:;">
                                        <img title="熊猫" src="/upload/emoji/emo_07.gif"></a></li>
                                    <li><a href="javascript:;">
                                        <img title="兔子" src="/upload/emoji/emo_08.gif"></a></li>
                                    <li><a href="javascript:;">
                                        <img title="奥特曼" src="/upload/emoji/emo_09.gif"></a></li>
                                    <li><a href="javascript:;">
                                        <img title="囧" src="/upload/emoji/emo_10.gif"></a></li>
                                    <li><a href="javascript:;">
                                        <img title="互粉" src="/upload/emoji/emo_11.gif"></a></li>
                                    <li><a href="javascript:;">
                                        <img title="礼物" src="/upload/emoji/emo_12.gif"></a></li>
                                    <li><a href="javascript:;">
                                        <img title="微笑" src="/upload/emoji/emo_13.gif"></a></li>
                                    <li><a href="javascript:;">
                                        <img title="嘻嘻" src="/upload/emoji/emo_14.gif"></a></li>
                                    <li><a href="javascript:;">
                                        <img title="哈哈" src="/upload/emoji/emo_15.gif"></a></li>
                                    <li><a href="javascript:;">
                                        <img title="可爱" src="/upload/emoji/emo_16.gif"></a></li>
                                    <li><a href="javascript:;">
                                        <img title="可怜" src="/upload/emoji/emo_17.gif"></a></li>
                                    <li><a href="javascript:;">
                                        <img title="抠鼻" src="/upload/emoji/emo_18.gif"></a></li>
                                    <li><a href="javascript:;">
                                        <img title="吃惊" src="/upload/emoji/emo_19.gif"></a></li>
                                    <li><a href="javascript:;">
                                        <img title="害羞" src="/upload/emoji/emo_20.gif"></a></li>
                                    <li><a href="javascript:;">
                                        <img title="调皮" src="/upload/emoji/emo_21.gif"></a></li>
                                    <li><a href="javascript:;">
                                        <img title="闭嘴" src="/upload/emoji/emo_22.gif"></a></li>
                                    <li><a href="javascript:;">
                                        <img title="鄙视" src="/upload/emoji/emo_23.gif"></a></li>
                                    <li><a href="javascript:;">
                                        <img title="爱你" src="/upload/emoji/emo_24.gif"></a></li>
                                    <li><a href="javascript:;">
                                        <img title="流泪" src="/upload/emoji/emo_25.gif"></a></li>
                                    <li><a href="javascript:;">
                                        <img title="偷笑" src="/upload/emoji/emo_26.gif"></a></li>
                                    <li><a href="javascript:;">
                                        <img title="亲亲" src="/upload/emoji/emo_27.gif"></a></li>
                                    <li><a href="javascript:;">
                                        <img title="生病" src="/upload/emoji/emo_28.gif"></a></li>
                                    <li><a href="javascript:;">
                                        <img title="太开心" src="/upload/emoji/emo_29.gif"></a></li>
                                    <li><a href="javascript:;">
                                        <img title="白眼" src="/upload/emoji/emo_30.gif"></a></li>
                                    <li><a href="javascript:;">
                                        <img title="右哼哼" src="/upload/emoji/emo_31.gif"></a></li>
                                    <li><a href="javascript:;">
                                        <img title="左哼哼" src="/upload/emoji/emo_32.gif"></a></li>
                                    <li><a href="javascript:;">
                                        <img title="嘘" src="/upload/emoji/emo_33.gif"></a></li>
                                    <li><a href="javascript:;">
                                        <img title="衰" src="/upload/emoji/emo_34.gif"></a></li>
                                    <li><a href="javascript:;">
                                        <img title="委屈" src="/upload/emoji/emo_35.gif"></a></li>
                                    <li><a href="javascript:;">
                                        <img title="呕吐" src="/upload/emoji/emo_36.gif"></a></li>
                                    <li><a href="javascript:;">
                                        <img title="打哈欠" src="/upload/emoji/emo_37.gif"></a></li>
                                    <li><a href="javascript:;">
                                        <img title="抱抱" src="/upload/emoji/emo_38.gif"></a></li>
                                    <li><a href="javascript:;">
                                        <img title="怒" src="/upload/emoji/emo_39.gif"></a></li>
                                    <li><a href="javascript:;">
                                        <img title="问号" src="/upload/emoji/emo_40.gif"></a></li>
                                    <li><a href="javascript:;">
                                        <img title="馋" src="/upload/emoji/emo_41.gif"></a></li>
                                    <li><a href="javascript:;">
                                        <img title="拜拜" src="/upload/emoji/emo_42.gif"></a></li>
                                    <li><a href="javascript:;">
                                        <img title="思考" src="/upload/emoji/emo_43.gif"></a></li>
                                    <li><a href="javascript:;">
                                        <img title="汗" src="/upload/emoji/emo_44.gif"></a></li>
                                    <li><a href="javascript:;">
                                        <img title="打呼" src="/upload/emoji/emo_45.gif"></a></li>
                                    <li><a href="javascript:;">
                                        <img title="睡" src="/upload/emoji/emo_46.gif"></a></li>
                                    <li><a href="javascript:;">
                                        <img title="钱" src="/upload/emoji/emo_47.gif"></a></li>
                                    <li><a href="javascript:;">
                                        <img title="失望" src="/upload/emoji/emo_48.gif"></a></li>
                                    <li><a href="javascript:;">
                                        <img title="酷" src="/upload/emoji/emo_49.gif"></a></li>
                                    <li><a href="javascript:;">
                                        <img title="好色" src="/upload/emoji/emo_50.gif"></a></li>
                                    <li><a href="javascript:;">
                                        <img title="生气" src="/upload/emoji/emo_51.gif"></a></li>
                                    <li><a href="javascript:;">
                                        <img title="鼓掌" src="/upload/emoji/emo_52.gif"></a></li>
                                    <li><a href="javascript:;">
                                        <img title="晕" src="/upload/emoji/emo_53.gif"></a></li>
                                    <li><a href="javascript:;">
                                        <img title="悲伤" src="/upload/emoji/emo_54.gif"></a></li>
                                    <li><a href="javascript:;">
                                        <img title="抓狂" src="/upload/emoji/emo_55.gif"></a></li>
                                    <li><a href="javascript:;">
                                        <img title="黑线" src="/upload/emoji/emo_56.gif"></a></li>
                                    <li><a href="javascript:;">
                                        <img title="阴险" src="/upload/emoji/emo_57.gif"></a></li>
                                    <li><a href="javascript:;">
                                        <img title="怒骂" src="/upload/emoji/emo_58.gif"></a></li>
                                    <li><a href="javascript:;">
                                        <img title="心" src="/upload/emoji/emo_59.gif"></a></li>
                                    <li><a href="javascript:;">
                                        <img title="伤心" src="/upload/emoji/emo_60.gif"></a></li>
                                </ul>
                            </div>
                        </div>
                    </div>

                    <div class="msg-input">
                        <div class="input-box">
                            <textarea id="text_in" class="edit-ipt" style="overflow-y: auto; font-weight: normal; font-size: 14px; overflow-x: hidden; word-break: break-all; font-style: normal; outline: none;padding: 5px;border:none;height:150px;" contenteditable="true" hidefocus="true" tabindex="0"></textarea>
                        </div>
                    </div>
                </div>

                <!-- 浮层 -->
                <div id="fuceng" class="hide" style="background: #e2e2e2;width:270px;height: 80px;position: absolute;bottom: 60px;right: -270px;z-index: 9999;border-radius: 8px;">
                    <ul style="display: inline-block;width: 100%;height: 30px;line-height: 40px;text-align: center;">
                        <li onclick="choosetype(this)" style="cursor: pointer;" name="1"><i id="type1" class="layui-icon hidden"></i><span>按Enter键发送消息，Ctrl+Enter换行</span></li>
                        <li onclick="choosetype(this)" style="cursor: pointer;" name="2"><i id="type2" class="layui-icon"></i><span>按Ctrl+Enter键发送消息，Enter换行</span></li>
                    </ul>
                </div>

                <div class="msg-toolbar-footer grey12" style="bottom:63px;">
                    <a onclick="send()" class="layui-btn" style="background:#d41010;position: absolute;left:0;top:0;width: 80%;height: 42px;text-align: center;line-height: 46px;">
                        发送
                    </a>
                    <a id="showinfo" style="position: absolute;right: 0;top: 0;width: 20%;height: 42px;background: #d41010;text-align: center; border-left: 1px solid #FFF;cursor: pointer;">
                        <i class="triangle" style="margin-top: 21px;"></i>
                    </a>
                </div>

            </div>


        </section>

        <style>
          

            #quit_reply div{
                float: left;
                display: inline-block;
                height: 30px;
                background:#0e9e21;
                border-radius: 5px;
                padding:0 10px 0 10px;
                line-height: 32px;
                color: #fff;
                margin-right: 10px; 
                margin-bottom: 10px; 
                cursor: pointer; 
                position: relative;
            }

            .tag{
                
            }
            
             #quit_reply a{
                color: #fff;
                text-decoration : none;
             }

             .mysize{
               display:none;
             }
           

        </style>

        <section class="chatinfo">

            <div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief" style="margin: 0px;">
                <ul class="layui-tab-title">
                    <li class="layui-this" style="width: 33%">访客信息</li>
                    <li style="width: 33%">黑名单</li>
                    <li style="width: 34%">快捷回复</li>
                </ul>

                <div class="layui-tab-content">
                    <div class="layui-tab-item layui-show">
                        <div class="" style="margin:20px; ">

                            <h4 style="font-weight: bold;">访问信息</h4>

                            <div style="margin-top: 20px;font-size: 15px;">
                                <i class="am-icon-xs am-icon-bookmark" style="cursor: pointer;" title="访客浏览页面"></i>：<span class="record" style="font-size: 13px;"> </span>
                            </div>
                            <div style="margin-top: 20px;font-size: 15px;">
                                <i class="am-icon-map-marker am-icon-xs" style="cursor: pointer;" title="访客来源地址"></i>：<span class="iparea" style="font-size: 13px;"> </span>
                            </div>

                            <div style="margin-top: 20px;font-size: 15px;">
                                <i class="am-icon-user-md am-icon-xs" style="cursor: pointer;" title="访客状态">：<span id="v_state" style="font-size: 10px;"></span></i>
                            </div>

                          <!--   <div style="margin-top: 20px;position: relative;">
                               <span style="font-size: 18px;"><i class="am-icon-user am-icon-xs" title="访客名称"></i>：</span>
                               <input type="text" id="visiter_name" class="layui-input" style="position: absolute;right:0;top:0;width: 90%;height: 30px;" onblur="saveinfo()" />
                            </div>

                             <div style="margin-top: 20px;position: relative;">
                               <span style="font-size: 18px;"><i class="am-icon-phone am-icon-xs" title="访客联系方式"></i>：</span>
                                <textarea  id="connect" class="layui-input" style="position: absolute;right:0;top:0;width: 90%;height: 60px;" onblur="saveinfo()"></textarea>
                            </div>

                             <div style="margin-top: 50px;position: relative;">
                               <span style="font-size: 18px;"><i class="am-icon-comment am-icon-xs" title="访客备注"></i>：</span>
                               <textarea  id="comment" class="layui-input" style="position: absolute;right:0;top:0;width: 90%;height: 60px;" onblur="saveinfo()"></textarea>
                            </div>
 -->
                        </div>

                    </div>

                    <div class="layui-tab-item" id="black_list" style="width: 100%;height:400px;overflow-y: auto;padding: 0px;"><div class="visiter"><img class="am-radius v-avatar" src="https://www.wolive.cc/assets/upload/15.jpg" width="50px"> <span style="position:absolute;left:58px;top:20px;font-size: 14px;">风车</span><button class="am-btn am-btn-danger am-btn-xs" style="position:absolute;right:10px;top:24px;" onclick="cut('1554196223')">删除</button></div><div class="visiter"><img class="am-radius v-avatar" src="/assets/images/index/avatar-red2.png" width="50px"> <span style="position:absolute;left:58px;top:20px;font-size: 14px;">游客XKMnh8bp</span><button class="am-btn am-btn-danger am-btn-xs" style="position:absolute;right:10px;top:24px;" onclick="cut('XKMnh8bp')">删除</button></div><div class="visiter"><img class="am-radius v-avatar" src="https://www.wolive.cc/assets/upload/7.jpg" width="50px"> <span style="position:absolute;left:58px;top:20px;font-size: 14px;">子萱</span><button class="am-btn am-btn-danger am-btn-xs" style="position:absolute;right:10px;top:24px;" onclick="cut('1554208263')">删除</button></div></div>

                    <div class="layui-tab-item" id="word_list" style="width: 100%;height: 500px; overflow-y: auto;">
                        <div id="quit_reply"><div id="reply423" onmouseover="show(this)" onmouseout="hide(this)"><a href="javascript:showon('')"></a><a href="javascript:close(423)"><i style="margin-left:5px;" class="layui-icon mysize">ဆ</i></a></div><div id="reply421" onmouseover="show(this)" onmouseout="hide(this)"><a href="javascript:showon('SDFSDFSD')">DDD</a><a href="javascript:close(421)"><i style="margin-left:5px;" class="layui-icon mysize">ဆ</i></a></div><div id="reply420" onmouseover="show(this)" onmouseout="hide(this)"><a href="javascript:showon('SDFSDFSD')">DDD</a><a href="javascript:close(420)"><i style="margin-left:5px;" class="layui-icon mysize">ဆ</i></a></div><div id="reply419" onmouseover="show(this)" onmouseout="hide(this)"><a href="javascript:showon('CDDDD')"></a><a href="javascript:close(419)"><i style="margin-left:5px;" class="layui-icon mysize">ဆ</i></a></div><div onclick="addreply()"><i class="layui-icon"></i></div></div>

                       
                    </div>

                </div>
            </div>

        </section>

    </div>

</div>

<script type="text/javascript">

    function saveinfo(){
        var data = $.cookie("cu_com");
        var jsondata = $.parseJSON(data);
        var name=$("#visiter_name").val();
        var connects=$('#connect').val();
        var comments=$("#comment").val();

        $.ajax({
          url:'/admin/manager/saveVisiter',
          type:'post',
          data:{visiter_name:name,connect:connects,comment:comments,visiter_id:jsondata.visiter_id},
          success:function(res){
            if(res.code == 0){
                getchat();
            }
          }
        });
        
    }


    function show(obj){
        
        $(obj).find('i').removeClass("mysize");
    }

    function hide(obj){
        $(obj).find('i').addClass("mysize");
    }

    function addreply(){
      
      var html='<form class="layui-form" style="margin-top:30px;">';
          html+='<div class="layui-form-item"><label class="layui-form-label">标签：</label>';
          html+='<div class="layui-input-block"><input id="tag" type="text" class="layui-input" style="width:260px" /></div></div>';
          html+='<div class="layui-form-item layui-form-text"><label class="layui-form-label">快捷用语：</label>';
          html+='<div class="layui-input-block"><textarea id="word" name="content" class="layui-textarea" style="width:260px" ></textarea></div></div>'
          html+='</form>';

        layer.open({
            type:1,
            title:'添加快捷语句',
            area: ['400px', '300px'],
            content: html,
            btn: ['确定', '取消'],
            yes:function(res){
                  $.ajax({
                    url: "/admin/manager/addword",
                    type: "post",
                    data: {word: $("#word").val(),tag:$("#tag").val()},
                    success: function (res) {
                        if (res.code ==0) {
                            layer.msg(res.msg, {icon: 1,time:2000,end:function () {
                              var tag=$("#tag").val();
                                   if(tag.length > 11){

                                         tag =tag.substring(0,11)+"...";
                                     }
                                       

                                 var str='<div id="reply'+res.data.id+'" onmouseover="show(this)" onmouseout="hide(this)">';
                                     str+='<a class="tag" href="javascript:showon('+"'"+res.data.word+"'"+')">'+tag+'</a>';
                                     str+='<a href="javascript:close('+res.data.id+')"><i style="margin-left:5px;" class="layui-icon mysize">&#x1006;</i></a></div>';
                                 $("#quit_reply").prepend(str);
                                 layer.closeAll();
                            }});
                        }
                    }
                });
            }
           
        });
    }

    function close(id){
        $.ajax({
            url:'/admin/manager/delreply',
            type:'post',
            data:{id:id},
            success:function(res){
                if(res.code ==0){
                    layer.msg(res.msg,{icon:1,end:function(){
                        
                         $("#reply"+id).remove();
                    }});
                }
            }
        })
    }


    function showon(str){
      
      $("#text_in").val(str);

    }



    function getOs() {
        var OsObject = "";

        if (isFirefox = navigator.userAgent.indexOf("Firefox") > 0) {
            return "Firefox";
        }
    }

 function showDiv(){
       
       $("#fuceng").toggleClass('hide');
    }


    $(function (){

    $("#showinfo").on('click',function(event){

        showDiv();

        $(document).one("click", function () {
        
         $("#fuceng").addClass('hide');

        }); 
        event.stopPropagation();//阻止事件向上冒泡
    });

   $("#fuceng").click(function (event) 
    {
        event.stopPropagation();//阻止事件向上冒泡
        
    });
 });
   


   

    function choosetype(obj){

        $(obj).children('i').removeClass('hidden');
        $(obj).siblings('li').children('i').addClass('hidden'); 
        var type =$(obj).attr('name');
        $.cookie('type',type);
        $("#fuceng").addClass('hide');

        types();
    }


    //获取qq截图的图片
    (function () {
        var imgReader = function (item) {
            var blob = item.getAsFile(),
                reader = new FileReader();
            // 读取文件后将其显示在网页中
            reader.onload = function (e) {
                var msg = '';
                msg += "<img onclick='getbig(this)'  src='" + e.target.result + "'>";


                    var sdata = $.cookie('cu_com');
                    if (sdata) {
                        var json = $.parseJSON(sdata);
                        var img = json.avater;
                    }

                    var sid = $('#channel').text();
                    var se = $("#chatmsg_submit").attr('name');
                    var customer = $("#customer").text();
                    var pic = $("#se_avatar").attr('src');
                    var time;

                    if($.cookie("time") == ""){
                        var myDate = new Date();
                            time = myDate.getHours()+":"+myDate.getMinutes();
                        var timestamp = Date.parse(new Date());
                        $.cookie("time",timestamp/1000);

                    }else{

                        var timestamp = Date.parse(new Date());

                        var lasttime =$.cookie("time");
                        if((timestamp/1000 - lasttime) >30){
                            var myDate =new Date(timestamp);
                            time = myDate.getHours()+":"+myDate.getMinutes();
                        }else{
                            time ="";
                        }

                        $.cookie("time",timestamp/1000);

                    }
                
                    var str = '';
                    str += '<li class="chatmsg"><div class="showtime">' + time + '</div>';
                    str += '<div style="position: absolute;top: 26px;right: 2px;"><img  class="my-circle se_pic" src="' + pic + '" width="50px" height="50px"></div>';
                    str += "<div class='outer-right'><div class='service'>";
                    str += "<pre>" + msg + "</pre>";
                    str += "</div></div>";
                    str += "</li>";

                    $(".conversation").append(str);
                    $("#text_in").empty();

                    var div = document.getElementById("wrap");
                    div.scrollTop = div.scrollHeight;

                    $.ajax({
                        url: "/admin/set/chats",
                        type: "post",
                        data: {visiter_id:sid,content: msg, avatar: img}
                    });
                    
                
            };
            // 读取文件
            reader.readAsDataURL(blob);
        };
        document.getElementById('text_in').addEventListener('paste', function (e) {
            // 添加到事件对象中的访问系统剪贴板的接口
            var clipboardData = e.clipboardData,
                i = 0,
                items, item, types;

            if (clipboardData) {
                items = clipboardData.items;
                if (!items) {
                    return;
                }
                item = items[0];
                // 保存在剪贴板中的数据类型
                types = clipboardData.types || [];
                for (; i < types.length; i++) {
                    if (types[i] === 'Files') {
                        item = items[i];
                        break;
                    }
                }
                // 判断是否为图片数据
                if (item && item.kind === 'file' && item.type.match(/^image\//i)) {
                    imgReader(item);
                }
            }
        });
    })();

  
    // 视频通话
    var getvideo =function(){

        var sid = $('#channel').text();
        var pic = $("#se_avatar").attr('src');

        var times = (new Date()).valueOf();
        var se = $("#se").text();
        //申请
        $.ajax({
            url: '/admin/set/apply',
            type: 'post',
            data: {id: sid,channel: times,avatar:pic,name:se},
            success:function(res){
                if(res.code !=0){
                    layer.msg(res.msg,{icon:2,offset:'20px'});
                }else{
                   
                    var str='';
                    str+='<div class="videos">';
                    str+='<video id="localVideo" autoplay></video>';
                    str+='<video id="remoteVideo" autoplay class="hidden"></video></div>';


                      layer.open({
                          type:1
                          ,title: '视频'
                          ,shade:0
                          ,closeBtn:1
                          ,area: ['440px', '378px']
                          ,content:str
                          ,end:function(){

                           
                             mediaStreamTrack.getTracks().forEach(function (track) {
                                track.stop();
                            });
            
                          }
                    });
                      
                      
                     try{
                         connenctVide(times);
                     }catch(e){
                         console.log(e);
                         return;
                     }

                }
            }

        });
        
      
    }




    //
    var gethistory=function(){

       var sdata = $.cookie("cu_com");
       var jsondata = $.parseJSON(sdata);
       var vid =jsondata.visiter_id;
        layer.open({
            type: 2,
            title: '该用户所有历史消息',
            area: ['600px', '500px'],
            shade: false,
            content: '/admin/index/history?visiter_id='+vid
        });

    }

    var recorder = '';

    var getaudio =function(){

        //音频先加载
        var audio_context;
        var recorder;
        var wavBlob;
        //创建音频
        try {
            // webkit shim
            window.AudioContext = window.AudioContext || window.webkitAudioContext;
            window.URL = window.URL || window.webkitURL;
            audio_context = new AudioContext;

            if (!navigator.mediaDevices) {
                layui.layer.msg('语音创建失败');
            }
        } catch (e) {
            console.log(e);
            return;
        }
        navigator.mediaDevices.getUserMedia({audio: true}).then(function (stream) {
            var input = audio_context.createMediaStreamSource(stream);
            recorder = new Recorder(input);

            var falg = window.location.protocol;
            if (falg == 'https:') {
                recorder && recorder.record();

                //示范一个公告层
                layui.use(['jquery', 'layer'], function () {
                    var layer = layui.layer;

                    layer.msg('录音中...', {
                        icon: 16
                        , shade: 0.01
                        , skin: 'layui-layer-lan'
                        , time: 0 //20s后自动关闭
                        , btn: ['发送', '取消']
                        , yes: function (index, layero) {
                            //按钮【按钮一】的回调
                            recorder && recorder.stop();
                            recorder && recorder.exportWAV(function (blob) {
                                wavBlob = blob;
                                var fd = new FormData();
                                var wavName = encodeURIComponent('audio_recording_' + new Date().getTime() + '.wav');
                                fd.append('wavName', wavName);
                                fd.append('file', wavBlob);

                                var xhr = new XMLHttpRequest();
                                xhr.onreadystatechange = function () {
                                    if (xhr.readyState == 4 && xhr.status == 200) {
                                        jsonObject = JSON.parse(xhr.responseText);

                                        voicemessage = '<div style="cursor:pointer;text-align:center;" onclick="getstate(this)" data="play"><audio src="'+jsonObject.data.src+'"></audio><i class="layui-icon" style="font-size:25px;">&#xe652;</i><p>音频消息</p></div>';

                                        var sid = $('#channel').text();
                                        var pic = typeof imghead != 'undefined' && imghead ? imghead : $("#se_avatar").attr('src');
                                        var time;

                                        var sdata = $.cookie('cu_com');

                                        if (sdata) {
                                            var json = $.parseJSON(sdata);
                                            var img = json.avater;

                                        }

                                        if($.cookie("time") == ""){
                                            var myDate = new Date();
                                            time = myDate.getHours()+":"+myDate.getMinutes();
                                            var timestamp = Date.parse(new Date());
                                            $.cookie("time",timestamp/1000);

                                        }else{

                                            var timestamp = Date.parse(new Date());

                                            var lasttime =$.cookie("time");
                                            if((timestamp/1000 - lasttime) >30){
                                                var myDate =new Date(timestamp*1000);
                                                time = myDate.getHours()+":"+myDate.getMinutes();
                                            }else{
                                                time ="";
                                            }

                                            $.cookie("time",timestamp/1000);
                                        }

                                        var str = '';
                                        str += '<li class="chatmsg"><div class="showtime">' + time + '</div>';
                                        str += '<div style="position: absolute;top: 26px;right: 2px;"><img  class="my-circle se_pic" src="' + pic + '" width="50px" height="50px"></div>';
                                        str += "<div class='outer-right'><div class='service'>";
                                        str += "<pre>" +  voicemessage + "</pre>";
                                        str += "</div></div>";
                                        str += "</li>";

                                        $(".conversation").append(str);
                                        $("#text_in").empty();

                                        var div = document.getElementById("wrap");
                                        div.scrollTop = div.scrollHeight;

                                        $.ajax({
                                            url: "/admin/set/chats",
                                            type: "post",
                                            data: {visiter_id: sid || visiter_id,content:  voicemessage, avatar: img}
                                        });
                                    }
                                };
                                xhr.open('POST', '/admin/event/uploadVoice');
                                xhr.send(fd);
                            });
                            recorder.clear();
                            layer.close(index);
                        }
                        , btn2: function (index, layero) {
                            //按钮【按钮二】的回调
                            recorder && recorder.stop();
                            recorder.clear();
                            audio_context.close();
                            layer.close(index);
                        }
                    });

                });
            } else {
                layer.msg('音频输入只支持https协议！');
            }
        }).catch(function (e) {
            layer.msg(e);
        });
    };

    var getstate = function (obj) {

        var c = obj.children[0];

        var type = 'mp3';
        var url = $(c).attr('src');
        if (/\.amr$/.test(url)) {
            type = 'amr';
            if (!obj.c) {
                obj.c = new BenzAMRRecorder();
                obj.c.initWithUrl(url).then(function () {
                    getstate(obj);
                });
                obj.c.onEnded(function () {
                    $(obj).attr('data', 'play');
                    $(obj).find('i').html("&#xe652;");
                });
                return;
            } else {
                c = obj.c;
            }
        }

        var state = $(obj).attr('data');

        if (state == 'play') {
            c.play();
            $(obj).attr('data', 'pause');
            $(obj).find('i').html("&#xe651;");

        } else if (state == 'pause') {
            c.pause();
            $(obj).attr('data', 'play');
            $(obj).find('i').html("&#xe652;");
        }

        if (type != 'amr') {
            c.addEventListener('ended', function () {
                $(obj).attr('data', 'play');
                $(obj).find('i').html("&#xe652;");
            }, false);
        }
    };

    var getswitch = function () {

        var sdata = $.cookie("cu_com");
        var jsondata = $.parseJSON(sdata);
        var sid = jsondata.visiter_id;

        var se = $("#se").text();

        layer.open({
            type: 2,
            title: '客服列表',
            area: ['300px', '400px'],
            shade: false,
            content: '/admin/index/service?visiter_id=' + sid + '&name=' + se
        });
    };

    (function () {
        var hm = document.createElement("script");
        hm.src = "/assets/libs/webrtc/recorder.js";
        var s = document.getElementsByTagName("script")[0];
        s.parentNode.insertBefore(hm, s);
    })();

    (function () {
        var hm = document.createElement("script");
        hm.src = "/assets/libs/audio/BenzAMRRecorder.js";
        var s = document.getElementsByTagName("script")[0];
        s.parentNode.insertBefore(hm, s);
    })();

</script>
<script type="text/javascript" src="/assets/js/admin/chat.js?v=1.3"></script>
<!-- <div class="footer_main"></div> -->

</div>
<script type="text/javascript" src="/assets/js/video.js?v=1.3"></script>

<script>
    var _hmt = _hmt || [];
    (function () {
        var hm = document.createElement("script");
        hm.src = "https://hm.baidu.com/hm.js?bc8045638f0448307931dcc2b949fdd1";
        var s = document.getElementsByTagName("script")[0];
        s.parentNode.insertBefore(hm, s);
    })();

    wolive_connect();

</script>






</body></html>